import React from "react";
import "./righttop.css";
import dianliang from "../../../accets/images/dianliang.png";
import shui from "../../../accets/images/shui.png";
import * as echarts from "echarts";
import { useState, useEffect, useRef } from "react";
import { Getelewearth } from "../../../request/api";
function RightTop() {
  let li = useRef(null);
  let [options, Setoptions] = useState({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      data: ["Forest", "Steppe", "Desert", "Wetland"],
      textStyle: {
        color: "#fff",
      },
    },
    toolbox: {
      show: true,
      orient: "vertical",
      left: "right",
      top: "center",
    },
    xAxis: {
      type: "category",
      axisTick: { show: false },
      data: ["2012", "2013", "2014", "2015", "2016"],
    },
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "Forest",
        type: "bar",
        barGap: 0,
        emphasis: {
          focus: "series",
        },
        data: [320, 332, 301, 334, 390],
        barWidth:15,
      },
      {
        name: "Steppe",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        data: [220, 182, 191, 234, 290],
        barWidth:15,
      },
      {
        name: "Desert",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        data: [150, 232, 201, 154, 190],
        barWidth:15,
      },
      {
        name: "Wetland",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        data: [98, 77, 101, 99, 40],
        barWidth:15,
      },
    ],
  });
  useEffect(() => {
    var myChart = echarts.init(li.current);
    Getelewearth().then((res) => {
      console.log(res, "1111");
      options.legend.data = res.data.data.result[0].series.map(
        (item) => item.name
      );
      options.xAxis.data = res.data.data.result[0].yAxis.data;
      options.series = res.data.data.result[0].series.map((item) => {
        return {
          ...item,
        };
      });

      Setoptions(options);
      myChart.setOption(options);
      
    });
    window.addEventListener('resize', function() {
      myChart.resize();
    });
  }, [options]);
  return (
    <div className="right-box">
      <div className="right-title">
        <div>水电用量</div>
      </div>
      <div className="right-top">
        <div className="top1">
          <div className="top-top1">
            <img src={dianliang} alt=''></img>
            <span>总用电量72670</span>
          </div>
          <div className="top-top2">
            <img src={shui} alt=''></img>
            <span>总用水量69035</span>
          </div>
        </div>
        <div className="top2" ref={li}></div>
      </div>
    </div>
  );
}

export default RightTop;
